<template>
	<view class="goods-box">
		<!-- 轮播图 -->
		<swiper class="swiper-goods" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item class='swiper-item' v-for="(item,index) in goodsInfo.pics" :key="index">
				<image class='swiper-img' :src="item.pics_big" mode="" @click="preview(index)"></image>
			</swiper-item>
		</swiper>
		
		<!-- 商品详情 -->
		<view class="goods-info"  v-if="goodsInfo.goods_name">
			<view class="price">￥{{goodsInfo.goods_price}}</view>
			<view class="goods-content">
				<view class="goods-name">{{goodsInfo.goods_name}}</view>
				<view class="shoucang">
					<uni-icons type="star" size="24"></uni-icons>
					<text>收藏</text>
				</view>
			</view>
			<view class="yunfei">快递：免运费</view>
		</view>
		
		<!-- 商品详情图  rich-text 渲染html标签内容 -->
		<rich-text :nodes="goodsInfo.goods_introduce"></rich-text>
		
		<!-- 购物车 -->
		<view class="goods-car">
			<uni-goods-nav :fill="true" @click="icon" @buttonClick="buttonClick" :options="options" :buttonGroup="buttonGroup"></uni-goods-nav>
		</view>
	</view>
</template>

<script>
	import { goodsDetailData } from "@/api/goods_list_request.js";
	import {mapMutations,mapGetters} from 'vuex';
	export default {
		data() {
			return {
				goodsInfo:{},
				//uni-goods-nav 购物车
				//左
				options:[
					{
						icon:"shop",
						text:"商店"
					},
					{
						icon:"cart",
						text:"购物车",
						//购物车里的商品数量
						info:1
					}
				],
				//右
				buttonGroup:[
					{
						text:"加入购物车",
						backgroundColor:"#f00000",
						color:"#fff"
					},
					{
						text:"立即购买",
						backgroundColor:"orange",
						color:"#fff"
					}
				]
			};
		},
		onLoad(options) {
			console.log(options);
			this.getGoodsInfo(options.goods_id);
		},
		computed:{
			...mapGetters('cart_m',['total']),
		},
		methods:{
			...mapMutations('cart_m',['addToCart']),
			async getGoodsInfo(goods_id){
				const {data:res} = await goodsDetailData(goods_id);
				console.log(res);
				if(res.meta.status !== 200) return uni.$showMsg();
				
				res.message.goods_introduce = res.message.goods_introduce.replace(/<img/g,'<img style="display:block;"').replace(/webp/g,'jpg');
				this.goodsInfo = res.message;
			},
			preview(index){
				uni.previewImage({
					current:index,
					urls:this.goodsInfo.pics.map(item=>item.pics_big)
				})
			},
			icon(e){
				// console.log("左侧");
				// console.log(e);
				if(e.content.text === '购物车'){
					uni.switchTab({
						url:"/pages/cart/cart"
					})
				}
			},
			buttonClick(e){
				// console.log("右侧");
				// console.log(e);
				if(e.content.text === '加入购物车'){
					const goods = {
						goods_id:this.goodsInfo.goods_id,
						goods_name:this.goodsInfo.goods_name,
						goods_price:this.goodsInfo.goods_price,
						goods_count:1,
						goods_small_logo:this.goodsInfo.goods_small_logo,
						goods_state:true						
					}
					// console.log(goods);
					this.addToCart(goods);
					
					//点击加入购物车 购物车icons数+1
					// const findResult = this.options.find(item=>item.text == "购物车");
					// if(findResult){
					// 	findResult.info = this.total
					// }
				}
			}
		},
		watch:{
			total:{
				handler(newValue){
					// console.log(newValue);
					const findResult = this.options.find(item=>item.text =='购物车');
					if(findResult){
						findResult.info = newValue
					}
				},
				immediate:true
			}
		}
	}
</script>

<style lang="scss">
.goods-box{
	padding-bottom: 50px;
	border-top: 2px solid #C00000;
	
	.swiper-goods{
		height: 700rpx;
		
		.swiper-item{
			
			.swiper-img{
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.goods-info{
		padding: 10px;
		.price{
			color: #f00000;
			font-size: 45rpx;
		}
		.goods-content{
			width: 100%;
			display: flex;
			
			.goods-name{
				width: 80%;
				font-size: 26rpx;
				padding-right: 10px;
				display: flex;
				align-items: center;
			}
			.shoucang{
				width: 20%;
				color: gray;
				font-size: 15px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border-left: 1px solid #ccc;
			}
		}
		.yunfei{
			color: gray;
			font-size: 14px;
			margin: 10px 0;
		}
	}
	
	.goods-car{
		height: 50px;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		
	}
}
</style>
